<!doctype html>
<html lang="en">

<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<!-- Meta tags for search engines to crawl -->
	<meta name="robots" content="index,follow">
	<meta name="description" content="影像源代码--基于海量高分电影的动态交互展示平台">
	<meta name="keywords" content="emptyshot, dataset, mmlab, movie, deep learning, video analysis, computer vision">

	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

	<!-- Optional JavaScript -->
	<!-- jQuery first, then Popper.js, then Bootstrap JS -->
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

	<!-- Title and Icon -->
	<title>影像源代码--基于海量高分电影的动态交互展示平台</title>
	<link rel="shortcut icon" href="./emptyshot.ico" />

	<!-- include css -->
	<link rel="stylesheet" href="css/index.css">
	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/default.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/highlight.min.js"></script>
	<script>hljs.initHighlightingOnLoad();</script>

	<script src="js/annimations.js"></script>
	<script src="js/responsive.js"></script>
	<style>
		footer {
			background-color: #f2f2f2;
			text-align: center;
			padding: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.footer-wrapper {
			display: flex;
			align-items: center;
			flex-direction: column; /* 修改这里，表示垂直排列 */
			flex-wrap: wrap;
			font-size: 16px;
		}
		.footer-img{
			height: 40px;
		}
		.footer-logo {
			height: 100%;
			margin: 5px 20px; /* 设置左右间距为 10px */
		}
		/* 媒体查询 */
		@media only screen and (max-width: 760px) {
			.footer-wrapper {
				flex-direction: column;
				justify-content: center;
				font-size: 14px;
			}
			.footer-logo {
				height: 25px;
			}
		}
	</style>
</head>

<body>
    <!-- 导航栏部分 -->
	<nav class="navbar navbar-expand-md navbar-light  fixed-top shadow" style="background-color: #ffffff;" id="nav-bar">
		<div class=" col-xl-2  col-md-2 col-2">
			<a class="navbar-brand pull-right color-cayan" href="#banner" onclick="slideTo('banner'); return false;">
				<img src="src/imgs/emptyshot_logo.png" width="30" height="30" class="d-inline-block align-top" alt="">
				<b>影像源代码</b>
			</a>
		</div>

		<div class="col-xl-6 col-md-6 col-6">
			<div class="collapse navbar-collapse " id="nav-links1">
				<div class="navbar-nav ">
					<a class="nav-item nav-link text-grey" href="#about"
						onclick="slideTo('about');  return false;">About</a>
					<a class="nav-item nav-link text-grey" href="#terms"
						onclick="slideTo('terms');  return false;">Terms</a>
					<a class="nav-item nav-link text-grey" href="#copyright"
						onclick="slideTo('copyright');  return false;">Copyright</a>
				</div>
			</div>
		</div>

		<div class="offset-xl-1 col-xl-2 offset-xl-1   offset-md-1 col-md-3 col-0">
			<div class="collapse navbar-collapse pull-right" id="nav-links2">
				<div class="navbar-nav">
					<a class="nav-item nav-link text-grey" href="https://gitee.com/fish-in-jiangan-river/emptyshot" target="_blank">
						<span>Gitee
							<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px"
								viewBox="0 0 100 100" class="svg-icon">
								<path fill="currentColor"
									d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z">
								</path>
								<polygon fill="currentColor"
									points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9">
								</polygon>
							</svg>
						</span>
					</a>

				</div>
			</div>
		</div>
	</nav>
    <!-- 电影海报部分 -->
	<div class="banner-bg" id="banner">
		<div class="flying-text" id='banner-text'>
			<div id='banner-text-main' class="color-cyan-dark xl-font"><b>影像源代码</b></div>
			<div id='banner-text-sub' class="color-grey">基于海量高分电影的动态交互展示平台。</div>
			<br />
			<br />
			<!-- <button type="button" class=" btn btn-success btn-rounded" onclick="slideTo('download'); return false;">
				&nbsp&nbspDownload&nbsp&nbsp</button> -->
		</div>
		<div id="banner-im-grid">
            <div class="flying-text2" id='banner-text'>
                <img class="banner-im" src="https://www.pngdirs.com/attachment/a/a-55121.png" />
            </div>
            <div class="flying-text3" id='banner-text'>
                <img class="banner-im" src="https://www.pngdirs.com/attachment/a/a-55121.png" />
            </div>
            <div class="flying-text4" id='banner-text'>
                <img class="banner-im" src="https://www.pngdirs.com/attachment/a/a-55121.png" />
            </div>
            <div class="flying-text5" id='banner-text'>
                <img class="banner-im" src="https://www.pngdirs.com/attachment/a/a-55121.png" />
            </div>
		</div>
	</div>
    <!-- 对应导航栏左侧的各个模块 -->
	<div class="container">
        <!-- About部分 -->
		<div class="row" id="about">
			<div class="col-xl-12 col-md-12 col-12">
				<div class="row abs-mg-bot-xl text-center justify-content-between">
					<div class="contrastBtn abs-mg-top-hg  col-xl-3 col-lg-3 col-md-3 col-12" style="cursor: pointer;">
						<div class="abs-mg-bot"><img src='src/imgs/empty_shot.png' class="icon"></div>
						<div class="md-font bold abs-mg-bot-ti">空镜艺术</div>
					</div>
					<div class="contrastBtn abs-mg-top-hg col-xl-3 col-lg-3 col-md-3 col-12" style="cursor: pointer;">
						<div class="abs-mg-bot"><img src='src/imgs/color_motion.png' class="icon"></div>
						<div class="md-font bold abs-mg-bot-ti">运镜色彩</div>
					</div>
					<div class="contrastBtn abs-mg-top-hg  col-xl-3 col-lg-3 col-md-3 col-12" style="cursor: pointer;">
						<div class="abs-mg-bot"><img src='src/imgs/red_image.png' class="icon"></div>
						<div class="md-font bold abs-mg-bot-ti">符号意象</div>
					</div>
				</div>
			</div>
		</div>
        <!-- Contrast部分 -->
		<div class="row" id="terms">
			<div class="col-xl-12 col-md-12 col-12 abs-pd-top-md">
				<hr />
				<p class="lg-font bold">
					项目名词解释
				</p>
			</div>
			<div class="col-xl-12 col-md-12 col-12">
				<div class="row flex-nowrap abs-mg-bot-lg text-center justify-content-start overflowx">
					<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-12">
						<div class="card">
							<div class="card-header bold"> 🎬&nbsp 空镜分布</div>
							<div class="card-body sm-font">
								<div class="card-text-limit overflowy color-light justify-text-between">
                                    空镜头，又叫“景物镜头”，是指画面中没有人。空镜头与常规镜头可以互补而不能代替，是导演阐明思想内容、叙述故事情节、抒发感情的重要手段。
                                    空镜头常用以介绍环境背景、交代时间空间、抒发人物情绪、推进故事情节、表达作者态度，具有说明、暗示、象征、隐喻等功能，
                                    在影片中能够产生借物喻情、见景生情、情景交融、渲染意境、烘托气氛、引起联想等艺术效果，在银幕的时空转换和调节影片节奏方面也有独特作用。
                                </div>
							</div>
						</div>
					</div>
					<div class=" col-xl-3 col-lg-3 col-md-4 col-sm-6 col-12">
						<div class="card">
							<div class="card-header bold">📸 &nbsp 镜头变化快慢</div>
							<div class="card-body  sm-font">
								<div class="card-text-limit overflowy color-light justify-text-between">
                                    快慢镜头的速度是指特定的镜头在特定的时间内所能传送的光量。传送光量多的镜头被称为快镜头，传送光量相当少的镜头则被称为慢镜头。
                                    不要把这里所说的快慢概念同镜头所能捕捉快速运动物体的能力相混淆，就像把"干"这个术语用于马提尼酒时实际上与相对湿度并没有关系，
                                    把"快"这个术语用于镜头时同它凝固住快速运动物体的能力也没有什么关系；它只是用以描述镜头在特定的时间内所传送的光量。
								</div>
							</div>
						</div>
					</div>
                    <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-12">
						<div class="card">
							<div class="card-header bold"> 📒&nbsp 电影色彩</div>
							<div class="card-body sm-font">
								<div class="card-text-limit overflowy color-light justify-text-between">
									电影色彩是指电影中使用的颜色，包括角色服装、布景、灯光等方面的色调搭配。
									电影色彩是电影艺术中十分重要的一部分，它能够传递情感、氛围和故事情节的暗示。
									在电影制作中，通过对色彩的运用，可以实现一定的艺术效果，增强电影的表现力和观赏性。
									同时，不同的电影类型或题材也会运用不同的色彩风格，比如喜剧电影通常会使用明亮、鲜艳的色彩，而恐怖电影则会使用暗淡、单调的颜色来营造紧张的氛围。
                                </div>
							</div>
						</div>
					</div>
					<div class=" col-xl-3 col-lg-3 col-md-4 col-sm-6 col-12">
						<div class="card">
							<div class="card-header bold">📝&nbsp 人物情绪变化</div>
							<div class="card-body  sm-font">
								<div class="card-text-limit overflowy color-light justify-text-between">
									电影人物情绪变化指的是电影中人物角色从开始到结束，心理和情感状态的变化过程。
									这些情感状态可以是愉快、悲伤、痛苦、失望、恐惧、愤怒等等。在电影中，人物的情绪变化往往是情节发展的主线之一，它有助于推动故事情节的发展，
									并揭示出人物的性格、动机和内心世界等信息。此外，通过观察人物情绪的变化，观众也可以更加深入地理解电影中所呈现的主题和意义。
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<hr />
	</div>
	<!-- copyright部分 -->
	<footer id = 'copyright'>
		<div class="footer-wrapper">
			<p>中外电影视觉框架研究（2023）&copy; 四川大学中华文化传承与全球传播数字融合实验室</p>
			<p>©国家社科重大项目：中国特色电影知识体系研究</p>
			<div class="footer-img">
				<img class="footer-logo" src="src/imgs/scu.png" alt="Logo1">
				<img class="footer-logo" src="src/imgs/semiotics.png" alt="Logo2">
			</div>
		</div>
	</footer>

	<script>
		respondToWindowWidth();
		$(window).resize(function () {
			respondToWindowWidth();
		});
		event_bind();
		popover_bind();
	</script>
    <!-- 引入module.js -->
    <script src="js/index.js" type="module"></script>
</body>

</html>